<template>
    <div class="dashboard">
        <div class="tab-header">
            <div class="tab-header-item" :class="{active: tabActive == item.id}" v-for="(item,index) in tabList" :key="index">{{item.name}}</div>
        </div>
        <div class="tab-body">
            <div class="tab-panel" v-if="tabActive === 1"></div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import {ref, reactive} from 'vue';

const tabList = reactive([{
    name:'工作台',
    id:1
}])

const tabActive = ref(1)

const personalActive = ref('buy')

</script>
<style lang="scss">
.dashboard{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;

    .tab-header{
        height: 48px;
        width: 100%;
        margin-top: 24px;
        box-sizing: border-box;
        border-bottom: 1px solid #EBEEF5;
        display: flex;
        justify-content: center;

        .tab-header-item + .tab-header-item{
            margin-left: 48px;
        }

        .tab-header-item{
            position: relative;
            height: 100%;
            line-height: 48px;
            font-size: 16px;
            font-weight: 600;
            color: #303133;
            z-index: 4;
            cursor: pointer;

            &.active{
                color: #2770EE;

                &::after{
                    content:' ';
                    width: 100%;
                    height: 2px;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    z-index: 2;
                    background-color: #2770EE;
                }
            }
        }
    }

    .tab-body{
        flex: 1;
        height: 0;

        .tab-panel{
            width: 100%;
            height: 100%;
        }

        .personal{
            width: 720px;
            height: 100%;
            margin: 0 auto;
            box-sizing: border-box;
            padding: 24px;
            display: flex;

            .el-tabs{
                width: 100%;
                display: flex;
                flex-direction: column;

                .el-tabs__content{
                    flex: 1;
                    height: 0;

                    .el-tab-pane{
                        height: 100%;
                    }
                }
            }
            
        }

    }

    .user-wrap{
        height: 82px;
        display: flex;
        align-items: center;

        .icon{
            width: 48px;
            height: 48px;
            border-radius: 8px;
            margin-right: 16px;
        }

        .name{
            font-size: 18px;
            font-weight: 500;
            color: #303133;
            line-height: 26px;
            margin-bottom: 2px;
        }

        .link{
            font-size: 12px;
            font-weight: 400;
            color: #2770EE;
            line-height: 20px;
            margin-left: 10px;
            text-decoration: underline;
            cursor: pointer;
        }
    }

    .title{
        margin: 16px 0;
        font-size: 16px;
        font-weight: 500;
        color: #303133;
        line-height: 24px;
    }
}
</style>